<template>
    <div class="infobox">
        <h2>订单信息</h2>
        <div style="margin-top: 10px">
            <el-radio-group v-model="radio">
                <el-radio :label="0" @click.native="selet">外卖</el-radio>
                <el-radio :label="1" @click.native="selet1">食堂</el-radio>
                <el-radio :label="2" @click.native="selet2">打包</el-radio>
            </el-radio-group>
        </div>
        <div v-if="!flag" style="margin-top: 20px">没有数据</div>
        <div class="mytable" v-if="flag">
            <table>
                <tr>
                    <th>订单编号</th>
                    <th>菜品信息</th>
                    <th>地址</th>
                    <th>电话号</th>
                    <th>座位</th>
                    <th>类型(0表示外卖，1表示食堂，2打包)</th>
                    <th>时间</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in tableData" :key="index">
                    <td style="padding: 10px 20px;">{{item.info_id}}</td>
                    <td class="td">
                        <div v-for="(a,b) in item.foodAll" :key="b" style="display: flex;justify-content: space-around;align-items: center;padding: 10px 20px;">
                            <div style="margin-right: 20px">{{a.name}}</div>
                            <div>{{a.num}}个</div>
                        </div>
                    </td>
                    <td style="padding: 10px 20px;">{{item.address}}</td>
                    <td style="padding: 10px 20px;">{{item.phone}}</td>
                    <td style="padding: 10px 20px;">{{item.table_id}}</td>
                    <td style="padding: 10px 20px;">{{item.dining}}</td>
                    <td style="padding: 10px 20px;">{{item.time}}</td>
                    <td style="padding: 10px 20px;">{{item.note}}</td>
                </tr>
            </table>
        </div>
        <div style="overflow: hidden">
            <div style="float: right;margin-top:20px;margin-right: 20%;margin-bottom: 50px">
                <button @click="lastye" :disabled="sum <= 1 ? true : false" style="margin-right: 20px">上一页</button>
                <button @click="nextye" :disabled="cursor">下一页</button>
            </div>
        </div>
    </div>
</template>

<script>
    import  {getinfo} from '../api/api'
    export default {
        name: "info",
        data(){
            return{
                tableData:[],
                radio: 0,
                flag:false,
                sum:1,
                cursor:false
            }

        },
        methods:{
            //外卖
            selet(){
                this.get(0,1)
            },
            //食堂
            selet1(){
                this.get(1,1)
            },
            //打包
            selet2(){
              this.get(2,1)
            },
            // 上一页
            lastye(){
                if(this.sum > 1){
                    this.sum = this.sum - 1
                    this.get(`${this.radio}`, `${this.sum}`)
                }
                this.cursor = false
            },
            // 下一页
            nextye(){
                this.sum = this.sum + 1
                this.get(`${this.radio}`, `${this.sum}`)
                getinfo(`${this.radio}`, 10, `${this.sum}`).then(res=>{
                    if(res.status == 0){
                        if(res.data.length == 0){
                            this.cursor = true
                        }
                    }
                })
            },
            //获取订单数据
            get(type,n){
                getinfo(`${type}`, 10, `${n}`).then(res=>{
                    console.log(res)
                    if(res.status == 0){
                        this.tableData = []
                        if(res.message == '暂无数据！'){
                            this.flag = false
                        }else {
                            if(res.data.length == 0){
                                this.flag = false
                            }else {
                                res.data.forEach(value=>{
                                    value.foodAll = [];
                                    value.foodAll = JSON.parse(value.food_all);
                                    this.tableData.push(value);
                                })
                                this.flag = true
                            }
                        }
                    }
                })
            }
        },
        created() {
            //外卖
            this.get(0,1)
        }
    }
</script>

<style scoped>
    .mytable {
        height: 750px;
        overflow: auto;
    }
    table {
        margin-top: 20px;
        text-align: center;
        border: 1px solid skyblue;
        border-collapse:collapse;
        color: #606266;
    }
    table td{
        border: 1px solid #EBEEF5;
        align-items: center;

    }
    table th{
        border: 1px solid #EBEEF5;
        padding: 10px 20px;

    }
</style>
